<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>气球</title>
    <style>
      .qiqiu {
        width: 50px;
        height: 50px;
        position: absolute;
        /* opacity: 0; */
        animation: flyUp 5s ease-in-out forwards;
      }

      @keyframes flyUp {
        0% {
          bottom: 0;
          opacity: 0;
        }
        50% {
          opacity: 1;
          transform: translateY(-50%);
        }
        100% {
          top: 0;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="balloons"></div>
    <div id="daojishi" style="display: none"></div>
    <div id="defen" style="display: none"></div>
    <input
      type="button"
      id="1a"
      onclick="a()"
      value="开始"
      style="display: block"
    />

    <script>
      function a() {
        var indexId = 0;
        document.getElementById("defen").style.display = "block";
        document.getElementById("daojishi").style.display = "block";
        document.getElementById("1a").style.display = "none";
        var point = 0;
        var daojishi = parseInt(prompt("你想要倒计时多少秒？"), 10); // 确保输入被解析为整数
        var countdown = daojishi;
        document.getElementById("defen").textContent = "得分:0";

        // 更新倒计时显示
        function updateCountdown() {
          document.getElementById(
            "daojishi"
          ).textContent = `剩余时间: ${countdown}秒`;
          if (countdown <= 0) {
            clearInterval(intervalIdForCountdown); //停止执行
            alert("恭喜你！获得了" + point + "分");

            document.getElementById("defen").style.display = "none";

            document.getElementById("daojishi").style.display = "none";
            document.getElementById("1a").style.display = "block";
          }
        }

        var intervalIdForCountdown = setInterval(function () {
          //1秒一次
          countdown--;
          updateCountdown();
        }, 1000);
        function createBalloon() {
          for (var i = 0; i < Math.random() * 5 + 1; i++) {
            indexId++;
            var container = document.getElementById("balloons");
            var img = document.createElement("img"); //创建img
            img.src = "2.jpg";
            img.id = indexId;
            //--------------------------
           /* img.onclick = function () {
              console.log(666.111, this.id);
              this.style.display = "none";
              point++;
              document.getElementById("defen").textContent = "得分:" + point;
            };*/

            //this.id
            //-------------------------------------------------------两种方法
            //function(e)

            img.onclick = (e) => {//当点击图片时，执行大括号里的代码
              console.log(777,e.target)
              var a=e.target//e.target用来获取图片的各种信息（参数）
              a.style.display='none'
              point++;
              document.getElementById("defen").textContent = "得分:" + point;
            }; 
            img.className = "qiqiu";
            console.log(img.id);
            img.style.top = `${Math.random() * window.innerHeight}px`;
            img.style.left = `${Math.random() * window.innerWidth}px`;
            img.style.width = "50px";
            img.style.height = "50px";
            img.style.display = "block";
            container.appendChild(img); //把img添加到div里面
          }
        }

        let intervalId = setInterval(createBalloon, 1000); // 每秒创建n个新气球

        setTimeout(() => {
          clearInterval(intervalId);
        }, daojishi * 1000);

        // function qiqiuClick() {
        //}
      }
    </script>
    <script></script>
  </body>
</html>
